<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text="返回"></ion-back-button>
    </ion-buttons>
    <ion-title>{{title}}</ion-title>
    <ion-buttons slot="primary">
      <ion-button (click)="onEdit(0)" size="large">
        <ion-icon name="add-outline"></ion-icon> 新增
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-card>
  <ion-card-content>
    <ion-input class="search-input" placeholder="请输入联系人" [(ngModel)]="search.companyContactPeople"></ion-input>
    <ion-button size="small" color="primary" class="search-button" (click)="onSearch()"><ion-icon name="search-outline"></ion-icon> 搜索</ion-button>
  </ion-card-content>
</ion-card>

<ion-content>
  <!-- 上拉刷新 -->
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="chevron-down-circle-outline" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="更新中...">
    </ion-refresher-content>
  </ion-refresher>

  <ion-text color="medium" style="text-align: center;" *ngIf="isNoData">
    <p>暂无数据...</p>
  </ion-text>

  <ion-list>
    <ion-item-sliding *ngFor="let item of list">
      <ion-item lines="none">
        <div class="list-item">
          <ion-chip outline="true" color="primary">
            <ion-label color="primary" style="font-size:12px;" >生活服务</ion-label>
          </ion-chip> 
          如何清除家里的顽固污垢
          <hr color=#ddd class="line">
          <span class="list-item-company">2020-08-08</span>
           <ion-icon name="chevron-back-outline" style="float: right;position: relative;bottom: 25px;right: 5px;color: rgba(0,0,0,0.2);"></ion-icon>
          <span class="font-size-small"><ion-icon name="person-outline"></ion-icon> 作者：张峰</span>
          <ion-badge color="success" class="list-item-badge">浏览数：399</ion-badge>
        </div>
      </ion-item>
      <ion-item-options>
        <ion-item-option color="primary" (click)="onDetail(item.id)" >
          <ion-icon slot="start"  name="create-outline"></ion-icon>
          查看
        </ion-item-option>   
        <ion-item-option color="secondary" (click)="onEdit(item.id)" >
          <ion-icon slot="start"  name="create-outline"></ion-icon>
          编辑
        </ion-item-option>      
        <ion-item-option color="danger" (click)="onDelete(item.id)">
          <ion-icon slot="start" name="trash-outline"></ion-icon>
          删除
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <!-- 上拉加载 -->
  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
